import { useState } from 'react';
import { DndContext } from '@dnd-kit/core';
import Draggable from './c-cpns/Draggable';
import Droppable from './c-cpns/Droppable';
import type { DragMoveEvent, DragOverEvent } from '@dnd-kit/core';

const GridSort = () => {
	const [list, setList] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
	const [parent, setParent] = useState(null);
	const draggableMarkup = <Draggable id="draggable">Drag me</Draggable>;

	// const onDragMove = (event: DragMoveEvent) => {
	// 	console.log('onDragMove', event);
	// };

	const onDragOver = (event: DragOverEvent) => {
		console.log('onDragOver', event);
	};

	return (
		<DndContext
			onDragOver={onDragOver}
			// onDragMove={onDragMove}
		>
			{list.map((id) => (
				<Draggable key={id} id={id}>
					Drag: {id}
				</Draggable>
			))}
		</DndContext>
	);
};

export default GridSort;
